<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<!--
<p>Drag the p element back and forth between the two rectangles:</p>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" ondragend="dragEnd(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<p style="clear:both;"><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p>

<p id="demo">HelloWorld</p>



<table>
	<tr>
		<th>
			<div class="droptarget" ondrop="swap(event)" ondragover="allowDrop(event)" id="dd1">
				<p ondragstart="dragStart(event)" draggable="true" id="pp1">A</p>
			</div>
		</th>
		<th>
			<div class="droptarget" ondrop="swap(event)" ondragover="allowDrop(event)" id="dd2">
				<p ondragstart="dragStart(event)" draggable="true" id="pp2">B</p>
			</div>
		</th>
	</tr>
</table>-->

<p id="score">Score:</p>
<table>
	<?php
		$n = 3;
		$a = array("A","B","A","C","A","B","C","C","A");
		for($i=0;$i<$n;$i++){
			echo "<tr>";
			for($j=0;$j<$n;$j++){
				echo "<th>";
				echo "<div class='droptarget' ondrop='swap(event)' ondragover='allowDrop(event)' id='d$i'>";
				$index = $n*$i+$j;
				echo "<p ondragstart='dragStart(event)' draggable='true' id='p$index'>$a[$index]</p>";
				echo "</div>";
				echo "</th>";
			}
			echo "<tr>";
		}
	?> 
</table>

<script>

function swap(event){
	event.preventDefault();
    var data = event.dataTransfer.getData("Text");
	var tmp = document.getElementById(data).innerHTML;
	var target = event.target.id;
    document.getElementById(data).innerHTML = document.getElementById(target).innerHTML;
	document.getElementById(target).innerHTML = tmp;
	//document.getElementById(target).setProperty("draggable") = true;
	//document.getElementById(data).setProperty("draggable") = true;
	clear();
}
function clear(){
	var n = 3;
	var l1, l2, c;
    for(var i=0;i<n;i++){
		for(var j=0;j<n;j++){
			var index = n*j+i;
			
			if(j==0)
				l2 = document.getElementById("p"+index).innerHTML;
			else if(j==1)
				l1 = document.getElementById("p"+index).innerHTML;
			else{
				c = document.getElementById("p"+index).innerHTML;
				if(l2==l1 && l1==c){
					var score = (document.getElementById("score").innerHTML);
					document.getElementById("score").innerHTML = score+1;
				}
			}
		}
	}
}
function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
    document.getElementById("demo").innerHTML = "Started to drag the "+event.target.id+" element";
}

function dragEnd(event) {
    document.getElementById("demo").innerHTML = "Finished dragging the p element.";
}

function allowDrop(event) {
    event.preventDefault();
}

function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
}
</script>

</body>
</html>